<div class="grid_12">
    <div id="event" class="">
        <div class="grid_10">
            <div class="title">
                {{ event.evtTitle }} attendent un heureux &eacute;v&eacute;nement !
                &nbsp;
            </div> 
			
			<div class="description">
				<div class="comment_participer_div">
					<span class="comment_participer_span"> Comment participer ? </span>
					<br />Essayez de deviner la date de naissance, le sexe, le poids et taille du b&eacute;b&eacute; en remplissant tous les champs ci-dessous.
				</div>
			</div>

            <div class="description">

                <span class="participant">
                    {% if votes|length == 1 %}
						{{ votes|length }} participant a d&eacute;j&agrave; tent&eacute; sa chance.
                    {% elseif votes|length > 1 %}
                        {{ votes|length }} participants ont d&eacute;j&agrave; tent&eacute; leur chance.
                    {% endif %}
                </span> 

				<div class="comment_participer_div">
					<span class="blue">A vous de jouer !!</span>
				</div>
            </div>

            <div class="">
				<div class="bag">
					<span class="error_bag">
						{#{% for flashMessage in app.session.flashbag.get('error') %}
							{{ flashMessage }}
						{% endfor %}#}
					</span>
				</div>
				
				<form name="vote" action="{{ path('bmb_event_participate', { 'eventLink': event.evtLink }) }}" method="post" {{ form_enctype(form) }}>
{#					<div class="input-line">#}
                        {{ form_errors(form) }}

                        <div class="input-inline">
                            {% if null != app.user %}
                                {{ form_widget(form.votName, {'attr': {'value': app.user.username}}) }}
                            {% else %}
                                {{ form_widget(form.votName) }}
                            {% endif %}
                        </div>
                        <div class="input-inline">
                            {% if null != app.user %}
                                {{ form_widget(form.votEmail, {'attr': {'value': app.user.email, 'title': 'Vous serez averti si vous avez gagné' }}) }}
                            {% else %}
                                {{ form_widget(form.votEmail, {'attr': {'title': 'Vous serez averti si vous avez gagné' }}) }}
                            {% endif %}
                        </div>
						
                        <div class="input-inline long-input">
                            {{ form_widget(form.votDate) }}
                        </div>
					{#</div>
					<div class="input-line">#}
                        <div class="input-inline align-bottom-participate">
                            {{ form_widget(form.votGender) }}
                        </div>
                        <div id="slider_weight" class="input-inline">
							<span class="input-label-slider">{{ form_label(form.votWeight, "Poids en kg : ") }}</span>
                            {{ form_widget(form.votWeight, {'attr': {'class': 'slider', 'value': '3.0'}}) }}
							<div id="slider_weight_div"></div>
                        </div>
                        <div id="slider_size" class="input-inline">
							<span class="input-label-slider">{{ form_label(form.votSize, "Taille en cm : ") }}</span>
                            {{ form_widget(form.votSize, {'attr': {'class': 'slider', 'value': '50'}}) }}
							<div id="slider_size_div"></div>
                        </div>

                        <div class="input-inline align-bottom-participate">
							<button id="bmb_vote_button"><i id="bmb_vote_button_i" class=""></i> Voter</button>
                        </div>

                        {{ form_rest(form) }}

{#					</div>#}
				</form>
            </div>
        </div>

        <div class="grid_1">
                <button id="facebook_share_button" class="admin_button" title="Partagez cette naissance sur Facebook">
                    <i class="icon-facebook-sign"></i>
                    <a href="https://www.facebook.com/sharer/sharer.php?u={{ fullLink }}" target="_blank" class="admin_button_link">&nbsp;Partagez</a>
                </button>
				{% if event.evtBirthList is not null and event.evtBirthList is not empty and event.evtBirthList != "http://" %}
					<button id="birthlist_button" class="admin_button" title="Acc&eacute;dez &agrave; la liste de naissance">
						<i class="icon-list-ul"></i>
						<a href="{{ event.evtBirthList }}" target="_blank" class="admin_button_link">&nbsp;Liste de naissance</a>
					</button>
				{% endif %}
			
                {% if isAdmin %}
                    <button id="invite_friends_button" class="admin_button" title="Invitez vos amis">
                        <i class="icon-group"></i>
                        <span>&nbsp;Invitez</span>
                    </button>
                    <button id="edit_event_button" class="admin_button" title="Modifiez cet &eacute;v&eacute;nement">
                        <i class="icon-edit"></i>
                        <span>&nbsp;Modifiez</span>
                    </button>
                    <button id="close_event_button" class="admin_button" title="Fermez cet &eacute;v&eacute;nement">
                        <i class="icon-remove-sign"></i>
                        <span>&nbsp;Clore</span>
                    </button>
                {% endif %}
        </div>
		
		<div id="invite_friends" title="Inviter des amis">
			Invitez vos amis &agrave; participer ! &nbsp;<a class="invite_add"><i class="icon-plus-sign"></i></a>
			<form action="{{ path('bmb_event_invite', { 'eventLink': event.evtLink }) }}" method="post" {{ form_enctype(form) }}>
				<div id="invite_form" class="invite_form">
					<div class="invite_div">
						<input type="text" name="bmb_eventbundle_friend_1" autocomplete="off" placeholder="Email" />
					</div>
				</div>
				<div>
					<button id="bmb_invite_button"><i id="bmb_invite_button_i" class=""></i> Inviter</button>
				</div>
			</form>
		</div>

		<div id="edit_event" title="Modifier l'&eacute;v&eacute;nement">
			Vous pouvez mettre &agrave; jour les informations de &agrave; l'&eacute;v&eacute;nement.
			<form action="{{ path('bmb_event_edit', { 'eventLink': event.evtLink }) }}" method="post" {{ form_enctype(form) }}>
				<input type="text" id="bmb_eventbundle_event_title" name="bmb_eventbundle_event_title" required placeholder="Nom des parents"
						value="{{ event.evtTitle }}" />
				<input type="text" id="bmb_eventbundle_event_plannedDate" name="bmb_eventbundle_event_plannedDate" placeholder="date (jj/mm/yyyy)"
						value="{{event.evtPlannedDate|date("m/d/Y")}}" />
				<input type="text" id="bmb_eventbundle_event_birthList" name="bmb_eventbundle_event_birthlist" placeholder="Liste de naissance"
						value="{% if event.evtBirthList is not null and event.evtBirthList is not empty %}{{ event.evtBirthList }}{% endif %}"/>
				<button id="bmb_edit_button"><i id="bmb_edit_button_i" class=""></i> Modifier</button>
			</form>
		</div>

		<div id="close_event" title="Clore l'&eacute;v&eacute;nement">
			Pour mettre un terme &agrave; l'&eacute;v&eacute;nement saisissez la date de naissance, le nom et le sexe du b&eacute;b&eacute;.
			<form action="{{ path('bmb_event_close', { 'eventLink': event.evtLink }) }}" method="post" {{ form_enctype(form) }}>
				<input type="text" id="bmb_eventbundle_event_name" name="bmb_eventbundle_event_name" required placeholder="Nom du b&eacute;b&eacute;" />
				<input type="text" id="bmb_eventbundle_event_birthDate" name="bmb_eventbundle_event_birthDate" placeholder="Date de naissance (jj/mm/yyyy)" />
				<select id="bmb_eventbundle_event_gender" name="bmb_eventbundle_event_gender">
					<option value="f">Fille</option>
					<option value="m">Gar&ccedil;on</option>
				</select>
				<div id="popup_slider_weight" class="input-inline">
					<span class="input-label-slider"><label for="bmb_eventbundle_event_weight">Poids en kg : </label></span>
					<input type="text" id="bmb_eventbundle_event_weight" name="bmb_eventbundle_event_weight" value="3.5" class="input-slider" />
					<div id="popup_slider_weight_div"></div>
				</div>
				<div id="popup_slider_size" class="input-inline">
					<span class="input-label-slider"><label for="bmb_eventbundle_event_size">Taille en cm : </label></span>
					<input type="text" id="bmb_eventbundle_event_size" name="bmb_eventbundle_event_size" value="45" class="input-slider" />
					<div id="popup_slider_size_div"></div>
				</div>
				<button id="bmb_close_button"><i id="bmb_close_button_i" class=""></i> Clore</button>
			</form>
		</div>
		
		<div id="confirmation" title="Confirmation">
			<div class="bag">
				<span id="bag_notice" class="confirmation">
				</span>
			</div>
		</div>
    </div>
</div>
                    
<script type="text/javascript">
    $(document).ready(function() {
        $("#invite_friends").dialog({
            autoOpen: false,
            height: 320,
            width: 280,
            modal: true,
            resizable: false,
            dialogClass: 'event_dialog'
        });
		
		{% set notice_vote = app.session.flashbag.get('notice_vote') %}
		{% set notice_invite = app.session.flashbag.get('notice_invite') %}
		{% set notice_edit = app.session.flashbag.get('notice_edit') %}
		
		{% if notice_vote is not empty or notice_invite is not empty %}
			$("#confirmation").dialog({
				autoOpen: true,
				height: 80,
				width: 300,
				modal: true,
				resizable: false,
				dialogClass: 'event_dialog'
			});
			{% if notice_vote is not empty %}
				$("#bag_notice").append('Votre vote a bien été pris en compte.');
			{% elseif notice_invite is not empty %}
				$("#bag_notice").append('Vos invitations ont bien été envoyées.');
			{% elseif notice_edit is not empty %}
				$("#bag_notice").append('L\'événement a bien été mis à jour.');
			{% endif %}
		{% endif %}

        var inviteCount = 1;

        $("a.invite_add").click(function(e) {
            inviteCount++;
            $("#invite_form").append('<div class="invite_div"><input type="text" name="bmb_eventbundle_friend_' + inviteCount + '" autocomplete="off" placeholder="Email" /><div class="suppr"><a class="invite_del"><i class="icon-remove-sign"></i></a></div></div>');
        });

        $("body").on("click", "a.invite_del", function(e) {
            inviteCount--;
            $(this).parent('div').parent('div').remove();
        });

        $("#edit_event").dialog({
            autoOpen: false,
            height: 320,
            width: 300,
            resizable: false,
            modal: true});

        $("#close_event").dialog({
            autoOpen: false,
            height: 420,
            width: 300,
            resizable: false,
            modal: true});

        $("#invite_friends_button").click(
                function() {
                    $("#invite_friends").dialog("open");
                }
        );

        $("#edit_event_button").click(
                function() {
                    $("#edit_event").dialog("open");
                }
        );

        $("#close_event_button").click(
                function() {
                    $("#close_event").dialog("open");
                }
        );

        $("#facebook_share_button").click(
				function() {
{#			window.open("http://www.facebook.com/sharer.php?s=100&p[url]={{ fullLink }}&p[images][0]=https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/t1.0-1/p160x160/1536538_628766730533974_9089173699036934977_a.png&p[title]={{ event.evtTitle }} attendent un heureux événement !&p[summary]=Venez parier sur la naissance de leur futur enfant !");#}
			window.open("https://www.facebook.com/sharer/sharer.php?u={{ fullLink }}&t={{ event.evtTitle }} attendent un heureux événement ! Venez parier sur la naissance de leur futur enfant");
		});

        $("#birthlist_button").click(
				function() {
			window.open("{{ event.evtBirthList }}");
		});

        $('#bmb_eventbundle_event_plannedDate').datepicker({lang: 'fr', firstDay: 1, defaultDate: '{{event.evtPlannedDate|date("d/m/Y")}}'});
        $('#bmb_eventbundle_event_plannedDate').datepicker("option", "dateFormat", "dd/mm/yy");

        $('#bmb_eventbundle_event_birthDate').datepicker({lang: 'fr', firstDay: 1, defaultDate: '{{event.evtPlannedDate|date("d/m/Y")}}'});
        $('#bmb_eventbundle_event_birthDate').datepicker("option", "dateFormat", "dd/mm/yy");

        $('#bmb_eventbundle_vote_votDate').datepicker({lang: 'fr', firstDay: 1, defaultDate: '{{event.evtPlannedDate|date("d/m/Y")}}'});
        $('#bmb_eventbundle_vote_votDate').datepicker("option", "dateFormat", "dd/mm/yy");
		
		$('#bmb_edit_button').click(function() {
			$('#bmb_edit_button_i').attr('class', 'icon-check-sign');
			$('#bmb_edit_button').attr('disabled', true);
			$('#bmb_edit_button').parents('form').submit();
		});
		
		$('#bmb_vote_button').click(function() {
			$('#bmb_vote_button_i').attr('class', 'icon-check-sign');
			$('#bmb_vote_button').attr('disabled', true);
			$('#bmb_vote_button').parents('form').submit();
		});
		
		$('#bmb_invite_button').click(function() {
			$('#bmb_invite_button_i').attr('class', 'icon-check-sign');
			$('#bmb_invite_button').attr('disabled', true);
			$('#bmb_invite_button').parents('form').submit();
		});
		
		$('#bmb_close_button').click(function() {
			$('#bmb_close_button_i').attr('class', 'icon-check-sign');
			$('#bmb_close_button').attr('disabled', true);
			$('#bmb_close_button').parents('form').submit();
		});
		
		$( "#slider_weight_div" ).slider({
			value:3.5,
			min: 2,
			max: 6,
			step: 0.05,
			slide: function( event, ui ) {
				$( "#bmb_eventbundle_vote_votWeight" ).val( ui.value );
			}
		});
		
		$( "#slider_size_div" ).slider({
			value:45,
			min: 25,
			max: 70,
			step: 1,
			slide: function( event, ui ) {
				$( "#bmb_eventbundle_vote_votSize" ).val( ui.value );
			}
		});
		
		$( "#popup_slider_weight_div" ).slider({
			value:3.5,
			min: 2,
			max: 6,
			step: 0.05,
			slide: function( event, ui ) {
				$( "#bmb_eventbundle_event_weight" ).val( ui.value );
			}
		});
		
		$( "#popup_slider_size_div" ).slider({
			value:45,
			min: 25,
			max: 70,
			step: 1,
			slide: function( event, ui ) {
				$( "#bmb_eventbundle_event_size" ).val( ui.value );
			}
		});
    });
</script>